<!DOCTYPE html>
<html>

	<head>

		<meta charset="UTF-8">

		<title>CSS3鼠标滑过图片放大特效DEMO演示</title>

		<style>
			html {
				font-family: sans-serif;
				-ms-text-size-adjust: 100%;
				-webkit-text-size-adjust: 100%
			}
			
			body {
				margin: 0
			}
			
			article,
			aside,
			details,
			figcaption,
			figure,
			footer,
			header,
			hgroup,
			main,
			nav,
			section,
			summary {
				display: block
			}
			
			audio,
			canvas,
			progress,
			video {
				display: inline-block;
				vertical-align: baseline
			}
			
			audio:not([controls]) {
				display: none;
				height: 0
			}
			
			[hidden],
			template {
				display: none
			}
			
			a {
				background: transparent
			}
			
			a:active,
			a:hover {
				outline: 0
			}
			
			abbr[title] {
				border-bottom: 1px dotted
			}
			
			b,
			strong {
				font-weight: bold
			}
			
			dfn {
				font-style: italic
			}
			
			h1 {
				font-size: 2em;
				margin: 0.67em 0
			}
			
			mark {
				background: #ff0;
				color: #000
			}
			
			small {
				font-size: 80%
			}
			
			sub,
			sup {
				font-size: 75%;
				line-height: 0;
				position: relative;
				vertical-align: baseline
			}
			
			sup {
				top: -0.5em
			}
			
			sub {
				bottom: -0.25em
			}
			
			img {
				border: 0
			}
			
			svg:not(:root) {
				overflow: hidden
			}
			
			figure {
				margin: 1em 40px
			}
			
			hr {
				-moz-box-sizing: content-box;
				box-sizing: content-box;
				height: 0
			}
			
			pre {
				overflow: auto
			}
			
			code,
			kbd,
			pre,
			samp {
				font-family: monospace, monospace;
				font-size: 1em
			}
			
			button,
			input,
			optgroup,
			select,
			textarea {
				color: inherit;
				font: inherit;
				margin: 0
			}
			
			button {
				overflow: visible
			}
			
			button,
			select {
				text-transform: none
			}
			
			button,
			html input[type="button"],
			input[type="reset"],
			input[type="submit"] {
				-webkit-appearance: button;
				cursor: pointer
			}
			
			button[disabled],
			html input[disabled] {
				cursor: default
			}
			
			button::-moz-focus-inner,
			input::-moz-focus-inner {
				border: 0;
				padding: 0
			}
			
			input {
				line-height: normal
			}
			
			input[type="checkbox"],
			input[type="radio"] {
				-moz-box-sizing: border-box;
				box-sizing: border-box;
				padding: 0
			}
			
			input[type="number"]::-webkit-inner-spin-button,
			input[type="number"]::-webkit-outer-spin-button {
				height: auto
			}
			
			input[type="search"] {
				-webkit-appearance: textfield;
				-moz-box-sizing: content-box;
				box-sizing: content-box
			}
			
			input[type="search"]::-webkit-search-cancel-button,
			input[type="search"]::-webkit-search-decoration {
				-webkit-appearance: none
			}
			
			fieldset {
				border: 1px solid #c0c0c0;
				margin: 0 2px;
				padding: 0.35em 0.625em 0.75em
			}
			
			legend {
				border: 0;
				padding: 0
			}
			
			textarea {
				overflow: auto
			}
			
			optgroup {
				font-weight: bold
			}
			
			table {
				border-collapse: collapse;
				border-spacing: 0
			}
			
			td,
			th {
				padding: 0
			}
		</style>

		<style>
			@import url("http://fonts.googleapis.com/css?family=Lato");
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			
			body {
				font: 14px/1 Lato, sans-serif;
				color: #555;
				background: #eee;
			}
			
			/* 图片样式从这里开始 */
			.gallery {
				width: 790px;
				margin: 30px auto;
				padding: 5px;
				background: #333;
			}
			
			.gallery>div {
				position: relative;
				float: left;
				padding: 5px;
			}
			
			.gallery>div>img {
				width: 250px;
				transition: .1s transform;
				transform: translateZ(0);
				/* hack */
			}
			
			.gallery>div:hover {
				z-index: 1;
			}
			
			.gallery>div:hover>img {
				transform: scale(1.5, 1.5);
				transition: .3s transform;
			}
			
			.cf:before,
			.cf:after {
				display: table;
				content: "";
				line-height: 0;
			}
			
			.cf:after {
				clear: both;
			}
			
			h1 {
				margin: 40px 0;
				font-size: 24px;
				text-align: center;
				text-transform: uppercase;
			}
			
			footer {
				margin: 80px 0;
				text-align: center;
			}
		</style>

		<!--<script src="js/prefixfree.min.js"></script>
-->
	</head>

	<body>

		<div class="gallery cf">
			<div>
				<img src="../img/landscape-test-1_1x.jpg" />
			</div>
			<div>
				<img src="../img/iceberg_1x.jpg" />
			</div>
			<div>
				<img src="../img/igloo-800_1x.jpg" />
			</div>
			<div>
				<img src="../img/trees_1x.jpg" />
			</div>
			<div>
				<img src="../img/space_1x.jpg" />
			</div>
			<div>
				<img src="../img/render1_1x.jpg" />
			</div>
		</div>

		<div style="text-align:center;clear:both;">
			<!--<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
			<script src="/follow.js" type="text/javascript"></script>-->
		</div>

	</body>

</html>